/********** @name: title组件 @describtion: props: title:字段别名,value:字段值 @author:liubingye @date:2023-02-10 10:29:07 ***********/
<template>
  <div class="title-outer-box">
    <div class="editor-icon" v-if="props.children && props.children.length > 0" @click="changeChildrenShow">
      <span :class="{ plus: childrenShow }"></span>
    </div>
    <el-form-item class="title-form-item" :prop="props.field">
      <!--   popoverVisible   -->
      <el-popover trigger="focus" :visible="popoverVisible" :width="selectorWidth">
        <div class="link-title" style="min-height: 60px" v-loading="optionLoading">
          <div class="title-item" v-for="item in titleLink" :key="item.id">
            <div class="title-box">
              <p class="title-p">
                <a :href="item.url" target="_blank">{{ item.title }}</a>
              </p>
              <p>
                <span v-for="(cate, index) in item.categoryList" :key="cate.id"><u v-show="index > 0" style="text-decoration: none">></u>{{ cate.name }}</span>
              </p>
            </div>
            <div class="button-box">
              <span class="is-exit" v-if="item.status === 2">已存在</span>
              <el-button text @click="importArticle(item)" v-if="item.status === 1">导入</el-button>
            </div>
          </div>
        </div>
        <template #reference>
          <!-- <el-input @focus="onInputFocus" @blur="onInputBlur" v-model="inputVal" autosize :placeholder="'输入' + props.title" show-word-limit :maxlength="props.setting.maxlength" type="textarea" @keydown="handleKeyDown" resize="none" ref="inputRef" /> -->
          <el-input v-model="inputVal" autosize :placeholder="'输入' + props.title" show-word-limit :maxlength="props.setting.maxlength" type="textarea" resize="none" ref="inputRef" />
        </template>
      </el-popover>
    </el-form-item>
    <div v-if="thumbComponent">
      <el-popover v-if="fieldsValue[thumbComponent.field]" :width="202">
        <template #reference>
          <div class="title-item-thumb has-thumb" @click="handleChangeThumb">
            <i class="iconfont">&#xe609;</i>
          </div>
        </template>
        <div class="thumb-box">
          <div class="delete-thumb" @click.stop="handleDeleteThumb">
            <el-icon><Delete /></el-icon>
          </div>
          <img :src="fieldsValue[thumbComponent.field]" alt="" />
        </div>
      </el-popover>
      <div class="title-item-thumb" v-else @click="handleChangeThumb">
        <i class="iconfont">&#xe609;</i>
      </div>
    </div>
  </div>
  <div v-if="props.children && props.children.length > 0">
    <RuifoxThumb ref="ruifoxThumbRef" v-if="thumbComponent" :title="thumbComponent.name" v-model:value="fieldsValue[thumbComponent['field']]" :field="thumbComponent.field"
      :content="thumbComponent.setting.grabfield ? fieldsValue[thumbComponent.setting.grabfield] : ''" :setting="thumbComponent.setting" :showForm="false" />
  </div>
</template>

<script setup>
/* eslint-disable */
import { computed, ref, onMounted, nextTick } from "vue"
import { searchLinkTitle } from "@/api/content"
import { Delete } from "@element-plus/icons-vue"

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  value: {
    type: String,
    default: "",
  },
  children: {
    type: Array,
    default: () => [],
  },
  childrenShow: {
    type: Boolean,
    default: false,
  },
  field: {
    type: String,
    default: "",
  },
  modelId: {
    type: String,
    default: "",
  },
  editId: {
    type: String,
    default: "",
  },
  fieldsValue: {
    type: Object,
    default: () => {},
  },
  placeholder: {
    type: String,
    default: "",
  },
  setting: {
    type: Object,
    default: () => {},
  },
})
const emits = defineEmits(["update:value", "importArticle", "update:fieldsValue", "update:childrenShow"])

const popoverVisible = ref(false)
const childrenShow = computed(() => props.childrenShow)
const changeChildrenShow = () => {
  emits("update:childrenShow", !childrenShow.value)
}
const inputVal = computed({
  get: () => props.value,
  set: (val) => {
    changeValue(val)
  },
})
const fieldsValue = computed({
  get: () => props.fieldsValue,
  set: (val) => {
    emits("update:fieldsValue", val)
  },
})
const optionLoading = ref(false)
const titleLink = ref([])
const handleSearchLinkTitle = async (val) => {
  if (props.setting.is_import && props.modelId && props.field) {
    optionLoading.value = true
    let res = await searchLinkTitle({ title: val, model_id: props.modelId, field: props.field })
    titleLink.value = res.data
    if (titleLink.value.length > 0 && props.editId === "") {
      popoverVisible.value = true
    } else {
      popoverVisible.value = false
    }
    optionLoading.value = false
  }
}
const changeValue = (val) => {
  emits("update:value", val)
  //查询相关title
  // 有了接口后解开此处代码
  // if (val && props.editId === "") {
  //   popoverVisible.value = true
  //   handleSearchLinkTitle(val)
  // } else {
  //   popoverVisible.value = false
  // }
}
const handleKeyDown = (e) => {
  if (e.key === "Enter") {
    if (window.event) {
      window.event.returnValue = false
    } else {
      e.preventDefault() //for firefox
    }
  }
}
const onInputFocus = () => {
  if (inputVal.value) {
    handleSearchLinkTitle(inputVal.value)
  }
}
const onInputBlur = () => {
  popoverVisible.value = false
}

const inputRef = ref()
const selectorWidth = ref(0)
const getInputWidth = () => {
  nextTick(() => {
    selectorWidth.value = inputRef.value.$el.offsetWidth < 260 ? 260 : inputRef.value.$el.offsetWidth
  })
}
onMounted(() => {
  getInputWidth()
})
const importArticle = (item) => {
  emits("importArticle", item)
}
// 上传缩略图
const ruifoxThumbRef = ref()
const handleChangeThumb = () => {
  ruifoxThumbRef.value.handleShowThumbBox()
}
// 删除缩略图
const handleDeleteThumb = () => {
  ruifoxThumbRef.value.deleteThumb()
}
// 是否有缩略图
const thumbComponent = computed(() => {
  return props.children?.find(item => item.component === "image")
})
</script>

<style scoped lang="scss">
.title-outer-box {
  min-height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 20px;
  padding-top: 40px;
  display: flex;
  .editor-icon {
    height: 16px;
    width: 16px;
    background-color: $mainColor;
    position: relative;
    border-radius: 2px;
    margin: 15px 5px 0 0;
    cursor: pointer;
    span {
      display: block;
      height: 100%;
      width: 100%;
    }
    span.plus:after {
      height: 0;
      top: 7px;
    }
    span:before,
    span:after {
      content: "";
      display: block;
      background-color: #fff;
      position: absolute;
      transition: all 0.3s;
    }
    span:before {
      height: 2px;
      width: 10px;
      left: 3px;
      top: 7px;
    }
    span:after {
      height: 10px;
      width: 2px;
      left: 7px;
      top: 3px;
    }
  }
  .title-form-item {
    flex: 1;
    margin-bottom: 0;
    ::v-deep(.el-textarea__inner) {
      border: none;
      box-shadow: none;
      line-height: 36px;
      font-size: 24px;
      padding-right: 50px;
    }
    ::v-deep(.el-input__count) {
      top: 15px;
    }
  }
  .title-item-thumb {
    height: 40px;
    width: 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #c4c9d5;
    border-radius: 4px;
    cursor: pointer;
    i {
      font-size: 18px;
      color: #aaaaaa;
    }
    &.has-thumb {
      background-color: #d1f0e2;
      border-color: #2cbf77;
      i {
        color: #2cbf77;
      }
    }
  }
}
.link-title {
  .title-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #e4e4e4;
    padding: 10px 0;
    .title-box {
      .title-p {
        @include textEllipsis(32px, 1);
      }
    }
    .button-box {
      .is-exit {
        line-height: 32px;
        color: $failColor;
      }
    }
  }
}
.thumb-box {
  width: 176px;
  height: 120px;
  position: relative;
  &:hover {
    .delete-thumb {
      display: flex;
    }
  }
  .delete-thumb {
    color: $white;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    display: none;
    height: 24px;
    width: 24px;
    background-color: #ff5240;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.5);
    align-items: center;
    justify-content: center;
    i {
      font-size: 16px;
    }
  }
  img {
    height: 100%;
    width: 100%;
  }
}
</style>
